HTML Media & Semantic Tags

1. Adding Audio in HTML

The <audio> tag is used to embed audio files on a webpage. Use the controls attribute to show play/pause buttons.

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
    

2. Adding Video in HTML

The <video> tag is used to embed video files. Common attributes: controls, width, height, autoplay, loop, muted.

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
    

3. Using Iframe

The <iframe> tag embeds another webpage inside the current webpage. It is commonly used to embed YouTube videos, maps, or external content.

<iframe width="400" height="250"
 src="https://www.youtube.com/embed/1pcikNlDB-4"
    title="YouTube video">
</iframe>
    

4. Semantic Tags in HTML

Semantic tags give meaning to the webpage structure. They make the content more understandable for browsers, developers, and search engines.

• <header> → Defines the top section (logo, navigation)
• <nav> → Navigation links
• <main> → Main content of the page
• <section> → Groups related content
• <article> → Independent piece of content (like a blog post)
• <aside> → Side content (like ads, links)
• <footer> → Bottom of the page (copyright, info)

Example of Semantic Layout:

<header>
    <h1>My Website</h1>
</header>

<nav>
    <a href="index.html">Home</a> |
    <a href="lecture 6.html">Lecture 6</a>
</nav>

<main>
    <section>
        <article>
            <h2>Blog Title</h2>
            <p>This is a blog post example.</p>
        </article>
    </section>

    <aside>
        <p>This is a sidebar with extra links.</p>
    </aside>
</main>

<footer>
    <p>Copyright © 2025</p>
</footer>
    

🏠 Homepage | ⬅ Previous Lecture